<script>
export default {
    name: 'imgDeom'
}
</script>
<script setup>
import { ref, onMounted, computed } from 'vue'
// import AlloyFinger from 'alloyfinger'
import AlloyFinger from '@/utils/alloy_finger.js'
import Transform from '@/utils/Transform.js'
import To from '@/utils/Transform.js'
// import '@/utils/to.js'

const imgList = ref([
    'https://img0.baidu.com/it/u=3990548126,236010045&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=1109',
    'https://wx1.sinaimg.cn/mw690/006c6Z5jly1hr4b4f3tmsj30zu25otm1.jpg',
    'https://q5.itc.cn/q_70/images03/20240413/fe42b29d66ac42469eba71393c8e5b59.jpeg',
    'https://img0.baidu.com/it/u=3508517716,3825786917&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1730',
    'http://img2.baidu.com/it/u=3798169769,1159554628&fm=253&app=138&f=JPEG?w=800&h=1734'
])
const imageX = ref(0) // x轴偏移
const imageY = ref(0) // y轴偏移
const rotate = ref(0) // 旋转
const imageScale = ref(1) // 缩放比
const zoom = ref(1)
const imageStyle = computed(() => ({
    transform: `translate(${imageX.value}px, ${imageY.value}px) scale(${imageScale.value}) rotate(${rotate.value}deg)`
}))
// transition-duration: 0.3s;
//     transform: matrix(2.30586, 0, 0, 2.30586, -133.333, 0);
function ease(x) {
    return Math.sqrt(1 - Math.pow(x - 1, 2))
}
const moveFun = () => {
    const imgMove = document.querySelector('#imgMove')
    Transform(imgMove)
    new AlloyFinger(imgMove, {
        multipointStart: function () {
            zoom.value = imgMove.scaleX;
        },
        doubleTap: (evt) => {
            // To.stopAll()
            // if (imgMove.scaleX > 1.5) {
            //     new To(imgMove, 'scaleX', 1, 500, ease)
            //     new To(imgMove, 'scaleY', 1, 500, ease)
            //     new To(imgMove, 'translateX', 0, 500, ease)
            //     new To(imgMove, 'translateY', 0, 500, ease)
            // } else {
            //     var y = 0
            //     var x = 0
            //     new To(imgMove, 'scaleX', 2, 500, ease)
            //     new To(imgMove, 'scaleY', 2, 500, ease)
            //     new To(imgMove, 'translateX', x, 500, ease)
            //     new To(imgMove, 'translateY', y, 500, ease)
            // }
        },
        pressMove: (evt) => {
            // console.log('移动：', evt)
            // if (evt.deltaX === 0 && evt.deltaY === 0) return
            // imgMove.translateX += evt.deltaX
            // imgMove.translateY += evt.deltaY
            // evt.preventDefault()
        },
        multipointEnd: function () {
            // To.stopAll()
            // if (imgMove.scaleX < 1) {
            //     new To(imgMove, 'scaleX', 1, 500, ease)
            //     new To(imgMove, 'scaleY', 1, 500, ease)
            // }
            // if (imgMove.scaleX > 2) {
            //     new To(imgMove, 'scaleX', 2, 500, ease)
            //     new To(imgMove, 'scaleY', 2, 500, ease)
            // }
            // var rotation = imgMove.rotateZ % 360

            // if (rotation < 0) rotation = 360 + rotation
            // imgMove.rotateZ = rotation

            // if (rotation > 0 && rotation < 45) {
            //     new To(imgMove, 'rotateZ', 0, 500, ease)
            // } else if (rotation >= 315) {
            //     new To(imgMove, 'rotateZ', 360, 500, ease)
            // } else if (rotation >= 45 && rotation < 135) {
            //     new To(imgMove, 'rotateZ', 90, 500, ease)
            // } else if (rotation >= 135 && rotation < 225) {
            //     new To(imgMove, 'rotateZ', 180, 500, ease)
            // } else if (rotation >= 225 && rotation < 315) {
            //     new To(imgMove, 'rotateZ', 270, 500, ease)
            // }
        },
        pinch: (evt) => {
            // console.log('缩放：', evt)
            imgMove.scaleX = imgMove.scaleY = zoom.value * evt.zoom
            // if(zoom.value<evt.zoom){
            //     imageScale.value  = imageScale.value*1.03
            // }else{
            //     imageScale.value  = imageScale.value/1.03
            // }
            // zoom.value = evt.zoom
            // imageScale.value = Math.max(0.2, Math.min(imageScale.value, 7))
            // imageScale.value = imageScale.value * evt.scale
            
            // let newScale = size === 'big' ? imageScale.value * 1.2 : imageScale.value / 1.2
            // imageScale.value = Math.max(0.2, Math.min(newScale, 7))
            // imgMove.scaleX = imgMove.scaleY = zoom.value * evt.zoom;
            
            // const _scale = imageScale.value * evt.zoom;
            // if (_scale > 5) {
            //     evt.zoom = 5 / imageScale.value;
            //     imageScale.value = 5;
            // } else if (_scale < 0.5) {
            //     evt.zoom = 0.5 / imageScale.value;
            //     imageScale.value = 0.5;
            // } else {
            //     imageScale.value = _scale;
            // }
            // if(evt.zoom>1){
            //     zoom.value = evt.scale
            //     console.log('big');
            //     imageScale.value = imageScale.value * 1.2
            //     imageScale.value = Math.max(0.2, Math.min(imageScale.value, 7))
            // }else{
            //     zoom.value = evt.scale
            //     console.log('xiao');
            //     imageScale.value = imageScale.value / 1.2
            //     imageScale.value = Math.max(0.2, Math.min(imageScale.value, 7))
            // }

            evt.preventDefault()
        },
        doubleTap: function (evt) {
            //console.log("doubleTap");
        }
    })
}
onMounted(() => {
    moveFun()
})
</script>

<template>
    <div class="img">
        <!-- <div class="imgList" v-for="(item, index) in imgList" :key="index">
      <img :src="item" alt="" />
    </div> -->
        <div class="showImg">
            <div class="den">{{ imageScale }}</div>
            <img :src="imgList[0]" :style="imageStyle" id="imgMove" alt="" />
        </div>
    </div>
</template>

<style scoped>
.img {
    width: 100vw;
}

.showImg {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}

.showImg img {
    max-width: 100vw;
    max-height: 100vh;
}

.den {
    position: fixed;
    top: 0;
    width: 100vw;
    height: 50px;
    color: #fff;
    z-index: 9;
    text-align: center;
    background: #000;
}

/* .imgList {
  width: 100vw;
}
.imgList img {
  width: 100%;
} */
</style>
